'use client';

import { useState } from 'react';
import Link from 'next/link';
import { useToast } from '@/components/ui/ToastProvider';
import LoadingSpinner from '@/components/ui/LoadingSpinner';
import { Mail, ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';

export default function ForgotPasswordPage() {
  const { showSuccess, showError } = useToast();
  
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [emailSent, setEmailSent] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);

    try {
      // 这里集成Better Auth的忘记密码功能
      // 暂时模拟API调用
      await new Promise(resolve => setTimeout(resolve, 2000));
      
      setEmailSent(true);
      showSuccess('邮件已发送', '请检查您的邮箱并按照说明重置密码');
    } catch (error: any) {
      console.error('发送重置邮件失败:', error);
      showError('发送失败', error.message || '网络错误，请重试');
    } finally {
      setLoading(false);
    }
  };

  if (emailSent) {
    return (
      <div className="w-full text-center">
        {/* 成功图标 */}
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <CheckCircle className="h-10 w-10 text-green-600" />
        </div>

        {/* 成功标题 */}
        <h2 className="text-3xl font-bold text-gray-900 mb-4">
          邮件已发送
        </h2>
        
        <p className="text-gray-600 mb-6 text-lg">
          我们已向 <span className="font-medium text-gray-900">{email}</span> 发送了密码重置链接
        </p>

        {/* 说明文字 */}
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-8 text-left">
          <h3 className="font-medium text-blue-900 mb-2">接下来的步骤：</h3>
          <ul className="text-blue-800 text-sm space-y-1">
            <li>• 检查您的邮箱收件箱（包括垃圾邮件文件夹）</li>
            <li>• 点击邮件中的重置密码链接</li>
            <li>• 设置新密码</li>
            <li>• 使用新密码登录</li>
          </ul>
        </div>

        {/* 操作按钮 */}
        <div className="space-y-4">
          <button
            onClick={() => {
              setEmailSent(false);
              setEmail('');
            }}
            className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
          >
            重新发送邮件
          </button>
          
          <Link
            href="/auth/login"
            className="w-full bg-gray-100 text-gray-700 py-3 px-4 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors flex items-center justify-center space-x-2"
          >
            <ArrowLeft className="h-4 w-4" />
            <span>返回登录</span>
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full">
      {/* 返回链接 */}
      <Link
        href="/auth/login"
        className="inline-flex items-center space-x-2 text-gray-600 hover:text-gray-900 mb-6 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        <span>返回登录</span>
      </Link>

      {/* 标题区域 */}
      <div className="text-center mb-8">
        <h2 className="text-3xl font-bold text-gray-900 mb-2">
          忘记密码
        </h2>
        <p className="text-gray-600">
          输入您的邮箱地址，我们将发送重置密码的链接
        </p>
      </div>

      {/* 忘记密码表单 */}
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* 邮箱输入 */}
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            邮箱地址
          </label>
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Mail className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              placeholder="输入您注册时使用的邮箱地址"
              required
            />
          </div>
        </div>

        {/* 发送按钮 */}
        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2"
        >
          {loading ? (
            <LoadingSpinner size="sm" text="" />
          ) : (
            <>
              <span>发送重置链接</span>
              <ArrowRight className="h-4 w-4" />
            </>
          )}
        </button>
      </form>

      {/* 安全提示 */}
      <div className="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <h3 className="font-medium text-yellow-900 mb-2 flex items-center">
          <svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
          </svg>
          安全提示
        </h3>
        <ul className="text-yellow-800 text-sm space-y-1">
          <li>• 重置链接将在24小时后过期</li>
          <li>• 每个邮箱地址每小时只能发送一次重置邮件</li>
          <li>• 如果您没有收到邮件，请检查垃圾邮件文件夹</li>
        </ul>
      </div>

      {/* 其他选项 */}
      <div className="mt-8 text-center">
        <p className="text-gray-600">
          记起密码了？{' '}
          <Link
            href="/auth/login"
            className="text-blue-600 hover:text-blue-500 font-medium"
          >
            立即登录
          </Link>
        </p>
      </div>
    </div>
  );
} 